<template>
	<view v-if="!loading" class="details">
		<view class="info">
			<view class="flex align-center" style="gap: 28rpx;">
				<view class="title">
					{{info.product_title}}
					<view v-if="info.product_is_sn" class="info-item">SN：{{info.product_sn}}</view>
				</view>
			</view>
			<view class="info-list">
				<view class="info-item">租赁方式：
					<view class="status">
						<view v-if="info.is_direct === 0" class="status-item status-wait">向服务商租赁</view>
						<view v-else class="status-item status-wait">向贝贝享飞平台租赁</view>
					</view>
				</view>
				<view class="info-item">订单编号：{{info.order_no}}</view>
				<view class="info-item">租赁日期：{{info.start_rent_date}}至{{ info.end_rent_date }}</view>
				<view class="info-item">租赁日数：{{info.rent_day}}天</view>
				<view class="info-item">订单总金额：{{info.pay_total_fee | formatPrice($formatPrice)}}元</view>
				<view v-if="info.pay_no" class="info-item">支付编号：{{info.pay_no}}</view>
				<view v-if="info.order_status === 2" class="info-item">待支付金额：{{info.unpaid_fee | formatPrice($formatPrice)}}元</view>
				<view class="info-item">订单状态：
					<view class="tags">
						<!--  0全部/2待付款/3待确认/4待发货/5待取货/6租赁中/7待归还/1已完成/-1已取消 -->
						<view v-if="info.order_status === -1" class="tag-item ">已取消</view>
						<view v-if="info.order_status === 1" class="tag-item tag-success">已完成</view>
						<view v-if="info.order_status === 2" class="tag-item tag-wait">待付款</view>
						<!-- <view v-if="info.order_status === 3" class="tag-item tag-wait">待确认</view> -->
						<view v-if="info.order_status === 3" class="tag-item tag-wait">租赁日期待确认</view>
						<view v-if="info.order_status === 31" class="tag-item tag-wait">租赁地址待确认</view>
						<view v-if="info.order_status === 4" class="tag-item tag-wait">待发货</view>
						<view v-if="info.order_status === 5" class="tag-item tag-wait">待取货</view>
						<view v-if="info.order_status === 6" class="tag-item tag-wait">租赁中</view>
						<view v-if="info.order_status === 7" class="tag-item tag-wait">待归还</view>
						<view v-if="info.order_status === 8" class="tag-item tag-wait">待评价</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item-card">
			<view class="title">客户信息</view>

			<view class="agent">
				<view class="avatar">
					<image :src="info.user_identity.thumb" mode="widthFix"></image>
				</view>
				<view class="flex-1">
					<!-- <view class="name">{{info.user_identity.linkman}}</view>
					<view class="address">{{info.user_identity.phone}}</view> -->
					<view class="name">{{info.u_real_name}}</view>
					<view class="address">{{info.u_phone}}</view>
				</view>
			</view>

			<button class="item-btn" @click="makePhoneCall">联系Ta取货</button>
		</view>


		<view v-if="info.log && info.log.length" class="time-line">
			<view class="title">订单时间节点</view>

			<view class="time-line-item" v-for="item in info.log" :key="item.gid">
				<view class="time">{{item.creation_time}}</view>
				<view class="padding-t8">{{item.title}}</view>
				<view v-if="item.desc" class="padding-t8" style="word-break: break-all;">{{item.desc}}</view>
				<!-- <view class="flex align-center">
					订单状态：
					<view class="tags">
						<view class="tag-item tag-success">租赁中</view>
						<view class="tag-item tag-wait">待确认</view>
						<view class="tag-item tag-wait">待收货</view>
						<view class="tag-item tag-complate">已完成</view>
						<view class="tag-item ">已取消</view>
					</view>
				</view> -->
				<view v-if="item.images" class="images">
					<view class="item-img" v-for="(img, index) in item.images" :key="index" @click="handlePreviewImage(item.images, index)">
						<image :src="img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view v-if="info.meta.length" class="footer-btns">
		<!--  && info.order_status < 5 -->
			<!-- <button v-if="info.have_pay_fee > 0" class="cancel" @click="handleRefund">退款</button>
			<button v-if="info.order_status === 31" class="confirm" @click="handleConfirmAddress">确认地址</button>
			<button v-if="info.order_status === 3" class="confirm" @click="handleConfirm">确认</button>
			<button v-if="info.order_status === 5" class="confirm" @click="handleDeliver">交付</button>
			<button v-if="info.order_status === 6 || info.order_status === 7" class="confirm" @click="handleBack">归还</button>
			<button v-if="info.order_status === -1" class="confirm" @click="handleDelete">订单删除</button> -->
			<!-- delete：删除
				refund：退款
				affirm_order：确认订单
				affirm_address：确认地址
				affirm_product：交付
				affirm_back：归还 -->
			<button v-if="info.meta.includes('refund')" class="cancel-btn flex-1" @click="handleRefund">退款</button>
			<button v-if="info.meta.includes('affirm_address')" class="confirm-btn flex-1" @click="handleConfirmAddress">确认地址</button>
			<button v-if="info.meta.includes('affirm_order')" class="confirm-btn flex-1" @click="handleConfirm">确认</button>
			<button v-if="info.meta.includes('affirm_product')" class="confirm-btn flex-1" @click="handleDeliver">交付</button>
			<button v-if="info.meta.includes('affirm_back')" class="confirm-btn flex-1" @click="handleBack">归还</button>
			<button v-if="info.meta.includes('delete')" class="confirm-btn flex-1" @click="handleDelete">订单删除</button>
		</view>
		
		<!-- 退款订单 -->
		<refund-order ref="refund" @refresh="getDtail(false)"></refund-order>
		<!-- 确认地址 -->
		<confirm-address ref="address" @refresh="getDtail(false)"></confirm-address>
		<!-- 确认订单 -->
		<confirm-order ref="confirm" @refresh="getDtail(false)"></confirm-order>
		<!-- 交付订单 -->
		<deliver-order ref="deliver" @refresh="getDtail(false)"></deliver-order>
		<!-- 归还订单 -->
		<back-order ref="back" @refresh="getDtail(false)"></back-order>
		
		<!-- 对话框 -->
		<com-dialog ref="dialog" open-type="" title="删除" content="是否确认删除订单" cancelButtonText="取消" confirmButtonText="确认" @success="handleDeleteOrder"></com-dialog>
	</view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';
	import refundOrder from '../components/refund-order.vue';
	import confirmAddress from '../components/confirm-address.vue';
	import confirmOrder from '../components/confirm-order.vue';
	import deliverOrder from '../components/deliver-order.vue';
	import backOrder from '../components/back-order.vue';
	import {
		previewImage
	} from '@/utils/uploadImg.js'
	
	export default {
		components: {refundOrder, confirmAddress, confirmOrder, deliverOrder, backOrder},
		mixins:[formatPrice],
		data() {
			return {
				gid: '', // 订单id
				info: {},
				loading: true
			};
		},
		onLoad(options) {
			this.gid = options.gid
			this.getDtail()
		},
		onUnload() {
			uni.$off('selectStock')
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			// 预览图片
			handlePreviewImage(list, index) {
				previewImage(list, index)
			},
			// 确认订单
			handleRefund() {
				this.$refs.refund.open(this.info)
			},
			// 确认地址
			handleConfirmAddress() {
				this.$refs.address.open(this.info)
			},
			// 确认
			handleConfirm() {
				this.$refs.confirm.open(this.info)
			},
			// 交付
			handleDeliver() {
				this.$refs.deliver.open(this.info)
			},
			// 归还
			handleBack() {
				this.$refs.back.open(this.info)
			},
			// 删除
			handleDelete() {
				uni.$emit('show-dialog', {
					title: '删除',
					content: '是否确认删除订单',
					cancelButtonText: '取消',
					confirmButtonText: '确认',
					onConfirm: () => {
						this.handleDeleteOrder()
						uni.$emit('hide-dialog')
					},
					onCancel: () => {
						uni.$emit('hide-dialog')
					},
				})
			},
			handleDeleteOrder() {
				this.$api.agentUserRentOrderDeleteApi(this.info.gid).then(res=> {
					uni.showToast({
						title: '删除成功'
					})
					this.getDtail()
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 联系取货
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.info.u_phone //仅为示例
				});
			},
			// 获取详情
			getDtail(loading=true) {
				this.loading = true
				this.$api.agentUserRentOrderDetailsApi(this.gid, {}, {loading}).then(res => {
					this.info = res.data
					this.info.log = this.info.log.map(item=> ({...item, images: item.images ? item.images.split(',') : []}))
				}).catch(err => {
					console.log('err', err);
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		padding: 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.info {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
		}

		.title {
			color: #000000;
			font-size: 34rpx;
			font-weight: 400;
			text-align: left;
			line-height: 46rpx;
		}

		.info-list {
			gap: 16rpx;
			display: flex;
			padding-top: 38rpx;
			// padding-bottom: 38rpx;
			flex-direction: column;
		}

		.info-item {
			color: #999999;
			font-size: 26rpx;
			text-align: left;
			font-weight: 400;
			line-height: 36rpx;

			display: flex;
			align-items: center;
		}

		.tags {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.tag-item {
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			background-color: #868686;

			color: #FFFFFF;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}

		.tag-success {
			background-color: #009D6E;
		}

		.tag-complate {
			background-color: #D4D4D4;
		}

		.tag-wait {
			background-color: #003D99;
		}

		.status {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.status-item {
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			border: 1px solid #868686;

			color: #868686;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}

		.status-success {
			color: #009D6E;
			border: 1px solid #009D6E;
		}

		.status-complate {
			color: #D4D4D4;
			border: 1px solid #D4D4D4;
		}

		.status-wait {
			color: #003D99;
			border: 1px solid #003D99;
		}

		.item-card {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;

			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				padding-bottom: 24rpx;
			}

			.agent {
				display: flex;
				align-items: center;

				.avatar {
					position: relative;
					width: 92rpx;
					height: 92rpx;
					flex-shrink: 0;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 28rpx;
					vertical-align: bottom;
					background-color: var(--primary-color);

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name {
					font-size: 34rpx;
					font-weight: 600;
					line-height: 48rpx;
					text-align: left;
					color: #000000;
				}

				.address {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					text-align: left;
					color: rgba(0, 0, 0, 0.4);
				}
			}


			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				margin-top: 32rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);

				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}

				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		}


		.time-line {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;

			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				padding-bottom: 24rpx;
			}

			.time-line-item {
				position: relative;
				color: #999999;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				margin-left: 8rpx;
				line-height: 36rpx;
				padding-left: 38rpx;
				padding-bottom: 42rpx;
				box-sizing: border-box;

				&:before {
					position: absolute;
					content: '';
					top: 12rpx;
					left: 0;
					z-index: 9;
					width: 10rpx;
					height: 10rpx;
					background-color: #E0E0E0;
				}

				&::after {
					position: absolute;
					content: '';
					top: 12rpx;
					left: 5rpx;
					width: 1px;
					height: 100%;
					background-color: #D9D9D9;
				}


				&:last-child {

					&::after {
						position: absolute;
						content: '';
						top: 12rpx;
						left: 5rpx;
						width: 1px;
						height: 100%;
						background-color: transparent;
					}

				}
			}

			.time {
				padding-bottom: 12rpx;
			}

			.images {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				gap: 16rpx;
				padding-top: 22rpx;

				.item-img {
					position: relative;
					width: 100%;
					padding-top: 100%;

					image {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						background-color: #D9D9D9;
					}
				}
			}
		}



		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

			gap: 14rpx;
			display: flex;
			align-items: center;
			
			.cancel {
				flex: 1;
				// width: 178rpx;
				height: 80rpx;
				border: 1px solid var(--primary-color);
			
				color: var(--primary-color);
				font-size: 34rpx;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
			}
			
			.confirm {
				flex: 3;
				height: 80rpx;
				border: 1px solid var(--gradient-color-vertical);
				background: var(--gradient-color-vertical);
			
				font-size: 34rpx;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>